<script>
	import {eventBus} from './abase/DragEventBus'
	export default {
		name: "CcDragBar",
    props: {
			className: {
				type: [String, Array],
        default: () => ''
      },
			data: {
				type: [String, Number, Object],
        default: () => ''
      }
    },
    data() {
			return {
				exactClass: '',
        startX: null,
        startY: null,
        startOffsetX: 0,
        startOffsetY: 0,
        positionX: null,
        positionY: null,
        barWidth: null,
        barHeight: null,
        Func: null,
				inDrag: false
      }
    },
    created(){
			typeof this.className === 'string' ? (this.exactClass = this.className) : (this.exactClass = this.className.join(' '));
    },
    mounted() {
			this.$refs.bar.ondragstart = this.onDragStart;
			this.$refs.bar.ondragend = this.onDragEnd;
			this.$refs.bar.ondrag = this.onDrag;
			setTimeout(() => {
				this.barWidth = this.$refs.bar.clientWidth + 2;
				this.barHeight = this.$refs.bar.clientHeight + 2;
				this.positionX = this.$refs.bar.offsetLeft;
				this.positionY = this.$refs.bar.offsetTop;
				this.startX = this.positionX;
				this.startY = this.positionY;
      }, 1000);
			console.log(this.$el.style.margin,this.positionY, 'bar');

    },
    methods: {
			onDragStart(e) {
				console.log(e);
				const {
					offsetX,
					offsetY,
				} = e;
				this.startOffsetX = offsetX;
				this.startOffsetY = offsetY;
        this.Func = this.mousemove;
        this.inDrag = true;
        e.dataTransfer.setDragImage(new Image(), 0, 0);
        e.dataTransfer.setData('ccDragData', JSON.stringify(this.data));
				eventBus.emit('onDrag', true);
				// document.addEventListener('mousemove', this.Func);
				// e.preventDefault();

      },
			onDragEnd(e) {
				this.inDrag = false;
				// document.removeEventListener('mousemove', this.Func);
				eventBus.emit('onDrag', false);
				e.preventDefault();
      },
			onDrag(e) {
        const {
        	offsetX,
          offsetY,
          clientX,
          clientY
        } = e;
				console.log(offsetX,offsetY,clientX,clientY);
        this.positionX = offsetX + this.startX - this.startOffsetX;
        this.positionY = offsetY + this.startY - this.startOffsetY;
				e.preventDefault();
      },
			mousemove(e){
				console.log(e)
      },
			onMousedown(e) {
				console.log(e)
      }
    },
    computed: {
			barStyle() {
				if(!this.positionX) return {};
				return {
					position: 'absolute',
          top: `${this.positionY}px`,
          left: `${this.positionX}px`,
          display: this.inDrag ? 'block' : 'none',
          pointerEvents: 'none',
          width: `${this.barWidth}px`,
          height: `${this.barHeight}px`,
        }
      },
    },
    render(h) {
      return (<div class="cc-drag-bar-container">
				<div ref="bar" draggable="true" class={'cc-drag-bar ' + this.exactClass}>
					{this.$slots.default}
				</div>
				<div ref="bar_copy" draggable="true" class={'cc-drag-bar ' + this.exactClass} style={{display: 'none', ...this.barStyle}}>
					{this.$slots.default}
				</div>
      </div>)
		}
	}
</script>

<style scoped>
  .cc-drag-bar-container{
    display: inline-block;
  }

</style>
